<template>
  <div id="app">
    <div class="weathmain">
      <el-row>
        <div class="weathmain-L">
          <div class="weathmain-top">12时天气一览</div>
          <div class="weathmain-b clearfix">
            <div v-for="(item,i) in list" :key="i">
              <el-col :span="2">
                <div class="weathmain-bottom">
                  <div class="weathmain-bottom-son weathmain-bottom-son1">{{item.time}}</div>
                  <div
                    class="weathmain-bottom-son weathmain-bottom-son2"
                    :class="[
                      {'duoyun': (item.weather == '晴' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                 ]"
                  ></div>
                  <div class="weathmain-bottom-son weathmain-bottom-son3">{{item.weather}}</div>
                  <div class="weathmain-bottom-son weathmain-bottom-son4">{{item.temperature}}</div>
                </div>
              </el-col>
            </div>
          </div>
        </div>
        <div class="weathmain-r weathmain-L">
          <div class="weathmain-top">一周天气一览</div>
          <div class="weathmain-b clearfix">
            <div v-for="(item,i) in list2" :key="i">
              <el-col :span="3">
                <div class="weathmain-bottom">
                  <div class="weathmain-bottom-son weathmain-bottom-son1">{{item.time}}</div>
                  <div
                    class="weathmain-bottom-son weathmain-bottom-son2"
                    :class="[
                      {'duoyun': (item.weather == '晴' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                      {'yeduoyun': (item.weather == '多云' )},
                 ]"
                  ></div>
                  <div class="weathmain-bottom-son weathmain-bottom-son3">{{item.weather}}</div>
                  <div class="weathmain-bottom-son weathmain-bottom-son4">{{item.temperature}}</div>
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 2,
          weather: "多云",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          pic: 1,
          weather: "晴",
          temperature: "28°"
        }
      ],
      list2: [
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        },
        {
          time: "8时",
          weather: "晴",
          temperature: "28°"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style scoped lang="less">
//清除浮动
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.weathmain {
  height: 180px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.3);
  .weathmain-L {
    float: left;
    width: 65%;
    .weathmain-top {
      height: 50px;
      text-align: left;
      color: #333;
      font-size: 16px;
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(245, 245, 245, 1);
      border-right: 1px solid rgba(245, 245, 245, 1);
    }
    .weathmain-b {
      border-right: 1px solid rgb(245, 245, 245) !important;
    }
    .weathmain-bottom {
      // background: red;
      height: 129px;
      .weathmain-bottom-son {
        height: 32.25px;
        line-height: 32.25px;
      }
      .weathmain-bottom-son1 {
        color: #4d71c7;
        font-size: 20px;
      }

      .duoyun {
        background: url(../../../assets/png/tianqi-duoyun.png) no-repeat center
          center;
      }
      .dayu {
        background: url(../../../assets/png/tianqi-dayu.png) no-repeat center
          center;
      }
      .yeduoyun {
        background: url(../../../assets/png/tianqi-yeduoyun.png) no-repeat
          center center;
      }
      .yintian {
        background: url(../../../assets/png/tianqi-yintian.png) no-repeat center
          center;
      }
      .weathmain-bottom-son2 {
        background-size: contain;
      }
      .weathmain-bottom-son4 {
        font-size: 16px;
        color: #4d71c7;
      }
    }
  }
  .weathmain-r {
    float: left;
    width: 35%;
    .weathmain-top {
      height: 50px;
      text-align: left;
      color: #333;
      font-size: 16px;
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(245, 245, 245, 1);
    }
  }
}
</style>